<template>
    <div class="member">
        <cube-scroll ref="scroll">

            <!--S用户信息-->
            <user-info></user-info>
            <!--E用户信息-->

            <!--SVIPBanner-->
<!--            <vip-banner></vip-banner>-->
            <!--EVIPBanner-->

            <!--S控制台按钮-->
            <control></control>
            <!--E控制台按钮-->


        </cube-scroll>


        <!--S子页面-->
        <transition :name="transition_name">
            <router-view class="main-child"/>
        </transition>
        <!--E子页面-->
    </div>
</template>

<script>
import UserInfo from "./components/user-info"
//import VipBanner from './components/vip-banner'
import Control from "./components/control"
import store from "@/store"
export default {
    name: "member",
    data() {
        return {
            // 页面切换动画
            transition_name: 'change-path animate__animated animate__slideInRight animate__faster animate__delay-2s'
        }
    },
    beforeRouteUpdate (to, from, next) {
        this.transition_name = to.path.split('/').length < from.path.split('/').length ? 'change-path animate__animated animate__slideOutRight animate__faster animate__delay-2s' : 'change-path animate__animated animate__slideInRight animate__faster animate__delay-2s'
        setTimeout(() => {
            next()
        },10)
    },
    components: {
        UserInfo,
        Control
    },
    mounted() {
        this.getUserInfo()
    },
    methods: {
        getUserInfo() {
            this.$get("member/getUserInfo")
                .then((res) => {
                    let {code, data} = res.data
                    if(code === 0) {
                        store.commit("member", data)
                    }
                })
        }
    }
}
</script>

<style lang="less" scoped src="./member.less"></style>
